
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<style type="text/css">
h2 { color: sienna; }
a { color: #333; text-decoration: none; }
body { background: #CCC; font-family: Verdana, Geneva, sans-serif; font-size: 12px; }
.TwoColumnz { margin-left:68px;display: block; border-bottom: 1px #DDD solid; position: relative;box-shadow:1px 1px 6px #333;height:35px;line-height:35px;width:700px; }
.TwoColumnz:hover img { width: 60px; height: auto;margin-left:-63px;z-index:999;display:block;box-shadow:1px 2px 8px #000;top:-15px;border:2px #CCC solid; }
.TwoColumnz:hover { background:#EEE; }
.TwoColumnz img { height: 30px; width: auto; top: 0px; position: absolute;margin-left:-33px; }
.totalKills { font-weight: bold; font-family: Arial }
.rightColumn { left:7px; }
.totalHonorableKills {display:inline-block;position:absolute;top:0px;left:600px;width:500px;}

</style>
</head>
<body>
<script type="text/javascript">
	var list = '[{"Name":"Aloe","Realm":"Aszune"},{"Name":"Aurealis","Realm":"Aszune"},{"Name":"Kares","Realm":"Aszune"},{"Name":"Ubela","Realm":"Aszune"},{"Name":"Rearview","Realm":"Aszune"},{"Name":"Stimpack","Realm":"Aszune"},{"Name":"Xenoksis","Realm":"Aszune"},{"Name":"Linke","Realm":"Aszune"},{"Name":"Caro","Realm":"Aszune"},{"Name":"Asy","Realm":"Aszune"},{"Name":"Dynlye","Realm":"Aszune"},{"Name":"Naisone","Realm":"Aszune"},{"Name":"Xeoniks","Realm":"Alakir"},{"Name":"Xeonix","Realm":"Aszune"},{"Name":"Xeonixi","Realm":"Stormscale"},{"Name":"Dyvine","Realm":"Aszune"},{"Name":"Doomlady","Realm":"Aszune"},{"Name":"Dyvine","Realm":"Aszune"},{"Name":"Dimitriss","Realm":"Aszune"},{"Name":"Shortcutty","Realm":"Aszune"},{"Name":"Toshman","Realm":"Aszune"},{"Name":"Armine","Realm":"Aszune"},{"Name":"Dynlye","Realm":"Saurfang"},{"Name":"Huntyoudown","Realm":"Twilightshammer"},{"Name":"Auroula","Realm":"Aszune"}]';
	var characters = $.parseJSON(list);
	var totalKills = 0;
</script> 
<script type="text/javascript">

$(document).ready(function() {
  // Handler for .ready() called.

	$(".result").empty();
	$(".totalKills").empty();
	$.each(characters, function(index, value) { 
			var myUrl = 'http://eu.battle.net/api/wow/character/'+value.Realm+'/'+value.Name+'?fields=pvp&guild&jsonp=?';
			var actualClickableUrl = 'http://eu.battle.net/api/wow/character/'+value.Realm+'/'+value.Name+'/advanced';
			$.getJSON(myUrl, function(data) {
				totalKills = totalKills + data.pvp.totalHonorableKills;
				$(".totalKills").html(totalKills);
				$( "#wowTemplate" ).tmpl( data ).appendTo( ".result" );
			});
	});

});

</script> 
<script id="wowTemplate" type="text/x-jquery-tmpl">
<div class="TwoColumnz">
			<div class="leftColumn" style="display:inline-block;">
						<img style="" src="http://eu.battle.net/static-render/eu/${thumbnail}"/> 
			</div>
			<div class="rightColumn"  style="display:inline-block;position:relative">
						 <a href='http://eu.battle.net/wow/en/character/${realm}/${name}/advanced'> ${name} [${level}] ( ${realm} ) </a>
								
						battlegroup ${battlegroup}
					
						achievementPoints</b> ${achievementPoints}
						<span class="totalHonorableKills" style="">Hk's <b>${pvp.totalHonorableKills}
			</div>

</div>
	

	
 </script>
<h1>HK Reporter</h1>
<h2 class="totalKills" style=""></h2>
<div class="result"></div>
</body>
</html>
